<template>
	<ls-page title="">
		<!-- 选项卡start -->
		<view class="tabs-contianr">
			<TabList :list="tabList" v-model:activeIndex="activeIndex" @tabClick="handleTabClick" />
		</view>
		<view class="onWine-container">
			<view class="onWine-container-nav" v-if="activeIndex == 0">
				<!-- isSelected -->
				<view class="nav-item" :class="{ 'isSelected': navCurrent === index }"
					v-for="(item,index) in navitemList" :key="index" @click="navItemChange(index)">{{item}}</view>
			</view>
			<view class="onWine-take-time" v-if="activeIndex == 1" @click="startTimeShow = true ">
				<view class="time-title">取酒时间：</view>
				<view class="time-pick" data-type="start">{{ startTime ? startTime : '开始时间' }}</view>
				<view class="time-title">--</view>
				<view class="time-pick" data-type="end">{{ endTime ? endTime : '结束时间' }}</view>
			</view>
			<scroll-view class="onWine-container-main" v-if="activeIndex == 0" @scrolltolower="scrollToLower" :scroll-y="true"
				lower-threshold="200">
				<view class="main-item" v-for="(v, k) in saveList" :key="k">
					<view class="item-state">
						<view class="item-state-left">{{ v.state }}</view>
					</view>

					<view class="item-title">
						<view class="item-title-iconqnjq" v-if="themetype == '001' "></view>
						<view class="item-title-icon" v-if="themetype == '002' "></view>
						<view class="item-title-text">{{ v.goodsName }}</view>
					</view>

					<view class="item-value">
						<view :class="'item-value-type ' + (v.isFull !== '1' ? 'notWhole' : '')">
							{{ v.isFull !== '1' ? '非整瓶' : '整瓶' }}
						</view>
						<view class="item-value-title">数量：</view>
						<view class="item-value-value">{{ v.residueQty }}瓶</view>
						<view class="cj-continar">
							<view class="barCode-title">取酒码：</view>
							<view class="barCode-num">{{ v.barCode }}</view>
						</view>
					</view>

					<view class="item-center">
						<view style="display: flex">
							<view>
								<view class="item-center-li" style="padding-top: 16rpx">
									<view class="li-title">门店：</view>
									<view class="li-value">{{ v.orgName }}</view>
								</view>
								<view class="item-center-li">
									<view class="li-title">寄存时间：</view>
									<view class="li-value">{{ v.storeDate }}</view>
								</view>
								<view class="item-center-li" style="padding-bottom: 0rpx">
									<view class="li-title">过期时间：</view>
									<view class="li-value">{{ v.expireDate }}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="item-footer" v-if="v.state != '已过期'">
						<view class="footer-tips" v-if="v.timeType !== '已过期'">
							{{ v.expireTip }}
						</view>
						<view class="footer-tips" v-else></view>
						<view class="footer-btn" v-if="shopInfo.h5CanStoreWine"  @click="isshowWine(v)">取酒</view>
					</view>
				</view>
			</scroll-view>

			<scroll-view class="onWine-take-main" @scrolltolower="scrollToLower" :scroll-y="true" lower-threshold="200"
				v-if="activeIndex == 1" >
				<view class="take-main-item" v-for="(v, k) in takeList" :key="k">
					<view class="item-header">
						<view class="header-left">订单ID:{{ v.code }}</view>
						<view class="header-right" v-if="v.state == '待领取'" style="color: #212121">{{ v.state }}</view>
						<view class="header-right" v-if="v.state == '已领取'" style="color: #999999">{{ v.state }}</view>
					</view>

					<view class="item-center">
						<view class="center-top">{{ v.goodsName }}</view>
						<view class="center-li">
							<view class="li-title">取出数量：</view>
							<view class="li-value">{{ v.takeQty }}</view>
						</view>
						<view class="center-li">
							<view class="li-title">桌台号：</view>
							<view class="li-value">{{ v.roomName }}</view>
						</view>
						<view class="center-li">
							<view class="li-title">存酒时间：</view>
							<view class="li-value">{{ v.storeDate }}</view>
						</view>
						<view class="center-li">
							<view class="li-title">取酒时间：</view>
							<view class="li-value">{{ v.takeDate }}</view>
						</view>
						<view class="center-li">
							<view class="li-title">取酒员：</view>
							<view class="li-value">{{ v.takeWaiter ? v.takeWaiter : '-- --' }}</view>
						</view>
					</view>

					<view class="item-imgs" v-if="!v.isShowImgs">
						<van-row gutter="9">
							<van-col span="8" v-for="(vi, ki) in v.imgs" :key="ki">
								<image class="imgs-item" :src="vi" mode="aspectFill"
									 :style="{ 'max-height': isShowImgs ? '0rpx' : '300rpx' }" />
							</van-col>
						</van-row>
					</view>

					<view class="item-footer" @click="showImgs(k)" >
						<image :class="['item-footer-icon', v.isShowImgs ? '' : 'turn']" 
							src="https://oss.jtmckj.com/wmp/kbq/common/i_radio_bottom.png" mode="aspectFill" />
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 取酒弹窗 -->
		<x-popup position="center" :show="showTake" :closeable="true" @update:show="showTake = $event">
			<view class="popup-take" style="width: 560rpx;">
				<view class="title">
					取酒
				</view>
				<view class="popup-take-main" v-if="inpValue < 1">
					确认取出
					<text class="main-text">{{ inpValue }}</text>
					{{goodsName}}?
				</view>
				<view class="popup-take-num" v-if="inpValue >= 1">
					<view class="num-title">取出数量</view>
					<u--input v-model="NewsinpValue" placeholder="请输入取酒数量" border="surround"></u--input>
					<view class="num-text">瓶</view>
				</view>
				<view class="popup-take-footer">
					<view class="footer-left" @tap="cancle">取消</view>
					<view class="footer-right" @tap="confirm">确认</view>
				</view>
			</view>
		</x-popup>
		<up-datetime-picker title="开始时间"  :show="startTimeShow" v-model="startTime2" 
			@close="startTimeShow = false" mode="date" @cancel="startTimeShow = false"
			@confirm="startTimeConfirm"></up-datetime-picker>

		<up-datetime-picker title="结束时间"  :show="endTimeShow" v-model="endTime2" 
			@close="endTimeShow = false" mode="date" @cancel="endTimeShow = false"
			@confirm="endTimeConfirm"></up-datetime-picker>
		<!-- 选择桌台方式 -->

		<x-popup title="选择取酒方式" position="center" :show="showWine" :closeable="true" :closeOnClickOverlay="true"
			@update:show="showWine = $event">
			<view class="popup-wine">
				<view class="title">
					选择取酒方式
				</view>
				<view style="height: 60rpx"></view>
				<!-- <van-radio-group value="{{ radio }}" bind:change="onChange" direction="horizontal">
	                  <van-radio name="1" use-icon-slot>
	                      我要寄存
	                      <image slot="icon" src="{{ radio === '1' ? icon.active : icon.normal }}" class="radio-img" style="width:32rpx;height:32rpx" />
	                  </van-radio>
	                  <van-radio name="2" use-icon-slot>
	                      我要取酒
	                      <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" class="radio-img" style="width:32rpx;height:32rpx" />
	                  </van-radio>
	              </van-radio-group>
	              <view style="height:36rpx"></view>
	              <view class="popup-wine-h2">选择方式</view> -->
				<view class="popup-wine-control">
					<view class="popup-wine-btn" @tap="onWine('set')">扫一扫</view>
					<view class="popup-wine-btn" @tap="onWine('get')">桌台号</view>
				</view>
			</view>
		</x-popup>
		<!-- 选择桌台号 -->
		<x-popup :show="showTable" position="bottom" :closeOnClickOverlay="true"
			@update:show="showTable = $event">
			<view class="popup-container">
				<view class="popup-container-header">
					<view class="header-left" @click="onWine">取消</view>
					<view class="header-center">选择桌号</view>
					<view class="header-right" @click="tableConfirm">确认</view>
				</view>
				<view class="popup-container-main">
					<van-row style="width: 100%" gutter="9" @click="selectArea">
						<van-col span="6" class="main-item"  v-for="(v, k) in tableList" :key="k">
							<view :style="'border-radius: 16rpx;;background: ' + (currentArea == k ? 'var(--dt-backcolorPink)' : '#f2f2f2') + ';color:' + (currentArea == k ? '#ffffff' : '#212121')" :id="k">
								{{ v.areaName }}
							</view>
						</van-col>
					</van-row>
				</view>
				<view style="max-height: 850rpx;overflow: auto;">
					   <view class="popup-container-footer" @tap="selectTab">
					   	<view class="footer-item"
					   		:style="'background: ' + (currentTable == ki ? 'var(--dt-backcolorPink)' : 'var(--maincolor)') + ';color:' + (currentTable == ki ? '#ffffff' : '#212121')"
					   		:id="ki" v-for="(vi, ki) in tableList[currentArea].children" :key="ki">
					   		{{ vi.name }}
					   	</view>
					   </view>
				</view>
				
			</view>
		</x-popup>
	</ls-page>
</template>

<script setup>
	import dayjs from 'dayjs';
	import { ref } from 'vue';
	import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
	import { HFiveAppObjProcess, HFiveMemberAppObjProcess, GetMinimsgTemplate } from '@/api/public.js'
    import {getWeChatJsSDKConfig,_ExtractParamsFromPath,initTableInfo} from '@/until/tools.js'
    import wx from "weixin-js-sdk";
	import { useTableStore } from '@/store/table.js';
	const storeTable = useTableStore();
	
	// -------------------------------------------------------初始化数据-----------------------------------------------------
	const themetype = uni.getStorageSync('themeInfo')?.type
	const shopInfo = uni.getStorageSync('shopInfo') //门店信息
	const userInfo = uni.getStorageSync('userInfo') //用户信息

	const tabList = [
		{ name: '我的存酒' },
		{ name: '我的取酒' }
	];
	const activeIndex = ref(0);
	const navitemList = ref(['存酒数(0)', '将过期(0)', '已过期(0)'])
	const navCurrent = ref(0)

	const saveList = ref([]); // 存酒列表
	const takeList = ref([]); // 取酒记录
	const active = ref(0); // 当前激活的 tab index
	const showTake = ref(false); // 是否显示取酒相关
	const NewsinpValue = ref(''); // 输入值
	const inpValue  = ref(''); // 
	const isInteger = ref(false); // 取酒数量是否要是整数
	const startTimeShow = ref(false); // 开始时间选择器显示
	const endTimeShow = ref(false); // 结束时间选择器显示
	const startTime = ref(getTodayDate());
	const minData = ref(0); // 结束时间的最小日期
	const endTime = ref(getTodayDate());
	const timeType = ref('');
	const saveForm = ref({
		memberMobile: userInfo.mobile,
		state: '',
		pageSize: '15',
		pageIndex: '1'
	});
	const saveHasMore = ref(true); // 是否有更多存酒数据
	const takeHasMore = ref(true); // 是否有更多取酒记录
	const headData = ref({
		beExpireNum: 0,
		expireNum: 0,
		storeNum: 0
	});
	const takeForm = ref({
		memberMobile: userInfo.mobile,
		pageSize: '15',
		pageIndex: '1',
		beginTime: '',
		endTime: ''
	});
	const radio = ref('2'); // 单选按钮
	const icon = ref({
		normal: 'https://oss.jtmckj.com/wmp/qnjg/common/i_icon_tra-bottom.png',
		active: 'https://oss.jtmckj.com/wmp/qnjg/common/i_radio_tra-top.png'
	});
	const tableList = ref([]);
	const showTable = ref(false);
	const currentArea = ref(0); // 当前选中区域
	const currentTable = ref(-1); // 当前选中的桌号
	const callShow = ref(false); // 是否显示呼叫
	const takeWineForm = ref({
		code: '',
		roomCode: '',
		takeQty: ''
	});
	const takeMnum = ref(''); // 取酒的最大数量
	const showWine = ref(false)
	const goodsName = ref('')//取酒商品名称
    const SDKConfig = ref({})
	const startTime2 = ref(getTodayDate2())
	const endTime2 = ref(getTodayDate2())
	// -------------------------------------------------------初始化数据-----------------------------------------------------

	onLoad((options) => {
		getSaveRecords(true)
		getTakeRecords(true)
		getRoomTable()
		getWeChatJsSDKConfig().then(resking => {
			SDKConfig.value = resking
		})
	})
  
    function getTodayDate() {
		  const today = new Date();
		   const year = today.getFullYear(); // 获取年份
		   const month = today.getMonth() + 1; // 获取月份（注意月份是从0开始的，+1是为了正确显示）
		   const day = today.getDate(); // 获取日期
		   return `${year}年${month}月${day}日`;
   }
   function getTodayDate2() {
         const today = new Date();
         return today.toISOString().split('T')[0];
   }
  
	// 状态选择
	const navItemChange = (type) => {
		console.log(type)
		if (type == 0) {
			saveForm.value.state = '';
		} else if (type == 1) {
			saveForm.value.state = '1';
		} else if (type == 2) {
			saveForm.value.state = '2';
		}
		getSaveRecords(true);
		navCurrent.value = type
	};

	// 存酒、取酒记录切换
	const handleTabClick = (e) => {
		if (e.index === 0) {
		takeForm.value.beginTime = '';
		takeForm.value.endTime = '';
			getSaveRecords(true);
		} else {
			takeForm.value.beginTime = dayjs(startTime2.value).format('YYYY-MM-DD HH:mm:ss')
			takeForm.value.endTime =  dayjs(endTime2.value).format('YYYY-MM-DD 23:59:59')
			getTakeRecords(true);
			
		}
	};


	// 取消取酒
	const cancle = () => {
		showTake.value = !showTake.value;
	};

	// 修改取酒数量
	// const onChangeInp = (e) => {
	//   inpValue.value = e.detail.value;
	// };

	// 判断一个值是否为整数
	const isIntegerValue = (value) => {
		const num = parseFloat(value);
		return Number.isInteger(num);
	};

	// 确认取酒
	const saveFlag = ref(false)
	const confirm = () => {
		if (Number(inpValue.value) > Number(takeMnum.value)) {
			uni.showToast({ title: '取酒数量不可超过存酒数量', icon: 'none' });
			return;
		}
		takeWineForm.value.takeQty = NewsinpValue.value;
		if (isInteger.value && !isIntegerValue(inpValue.value)) {
			uni.showToast({ title: '请输入整数', icon: 'none' });
			return;
		}
		if(saveFlag.value){
			uni.showToast({ title: '提交中，请稍等', icon: 'none' });
			return;
		}
		saveFlag.value = true
		showTake.value = false;
		HFiveMemberAppObjProcess({ functionName: 'OpWineTask_H5', contentData: takeWineForm.value })
			.then((res) => {
				uni.showToast({ title: '取酒成功，请等待服务员审核', icon: 'none' });
				getSaveRecords(true);
				getTakeRecords(true);
			});
		
	};

	//-------------------------------------------------------选择桌台--------------------------------------------------------------------
 
	// 选择桌台方式弹窗
	const isshowWine = (v) => {
        goodsName.value = v.goodsName
		takeWineForm.value.code = v.code;
		inpValue.value = v.residueQty;
		NewsinpValue.value = v.residueQty;
		takeMnum.value = v.residueQty;
		saveFlag.value = false
		if (inpValue.value >= '1') {
			isInteger.value = true;
		} else {
			isInteger.value = false;
		}
        console.log(userInfo.tableCode,'userInfo.tableCode')
		// 如果从主页来 已经选择了桌台 就不需要再选一次了
		if (userInfo.tableCode) {
			takeWineForm.value.roomCode = userInfo.tableCode;
			showTake.value = true
			// showWine.value = false;
			// showTable.value = false;
			// 显示取酒弹窗
		} else {
			showWine.value = true;
		}
	};


	// 扫码选择桌台
	const onWine = (type) => {
		if (type === 'set') {
			wx.config({
				debug: false, // 开启调试模式,
				appId: SDKConfig.value.appId, // 必填，企业号的唯一标识
				timestamp: SDKConfig.value.timestamp, // 必填，生成签名的时间戳
				nonceStr: SDKConfig.value.nonceStr, // 必填，生成签名的随机串
				signature: SDKConfig.value.signature, // 必填，签名
				jsApiList: ['scanQRCode'], // 必填，需要使用的JS接口列表
			});
			
			wx.ready((res) => {
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
					success: async function(res) {
						let options = {};
						if (res.resultStr) {
							options = _ExtractParamsFromPath(res.resultStr);
						}  else {
							   options = _ExtractParamsFromPath(res.path)
						}
					 	// 取酒扫码
					 	if (options.code) {
							// const result = await initTableInfo()
							let modal = { "functionName": "GetRoomInfo_H5", "contentData": { "roomCode": options.code } }
							const result = await HFiveMemberAppObjProcess(modal)
							if(result.consumeCode){
								storeTable.tableInfo.code = options.code
								takeWineForm.value.roomCode = options.code;
								showWine.value = false;
								showTable.value = false;
								// callShow.value = false;
								showTake.value = true;
							}else{
								uni.showToast({ title: '请联系服务员开台!谢谢', icon: 'none' })
							}
							
					 	}
			
					},
					fail: function(response) {
						uni.showToast({ title: "扫码失败", icon: "none" });
					},
				});
			})
			
		}  
		 else {
			showTable.value = !showTable.value;
		}
	};

	// 单选按钮变化
	const onChange = (event) => {
		radio.value = event.detail;
	};

	// 选中区域
	const selectArea = (e) => {
		if (e.target.id) {
			currentArea.value = e.target.id;
			currentTable.value = -1;
		}
	};

	// 选中桌台
	const selectTab = (e) => {
		if (e.target.id) {
			currentTable.value = e.target.id;
		}
	};


	// 确认选中桌台
	const tableConfirm = () => {
		const table = tableList.value[currentArea.value]?.children[currentTable.value];
		console.log(table, 'table')
		if (!table) {
			uni.showToast({ title: '请选择桌台', icon: 'none' });
			return;
		}

		userInfo.tableCode = table.code;
		takeWineForm.value.roomCode = table.code;
		showWine.value = false;
		showTable.value = false;
		callShow.value = false;
		showTake.value = true;
	};

	// 点击显示酒水图片
	const showImgs = (i) => {
		takeList.value[i].isShowImgs = false; // 隐藏图片
	};

	// 时间选择
	const toggleTimeShow = () => {
		startTimeShow.value = !startTimeShow.value;
	};

	const timeCancel = () => {
		startTimeShow.value = false;
		endTimeShow.value = false;
	};

	const startTimeConfirm = (e) => {
		const date = e.value;
		startTime.value = dayjs(date).format('YYYY年MM月DD日');
		startTimeShow.value = false;
		endTimeShow.value = true;
		takeForm.value.beginTime = dayjs(date).format('YYYY-MM-DD HH:mm:ss');
	};

	const endTimeConfirm = (e) => {
		const date = e.value;
		endTime.value = dayjs(date).format('YYYY年MM月DD日');
		endTimeShow.value = false;
		takeForm.value.endTime = dayjs(date).format('YYYY-MM-DD 23:59:59');
		getTakeRecords(true);
	};

	//---------------------------------------------------- 获取取酒房台 --------------------------------------------
	const getRoomTable = () => {
		HFiveMemberAppObjProcess({ "functionName": "GetRoomOpWine_H5", "contentData": { "consumeState": "2" } })
			.then(res => {
				tableList.value = res
			})
	}
    
	
    
  
	// 获取存酒记录
	const getSaveRecords = (flag) => {
		if (flag) {
			saveForm.value.pageIndex = 1;
			saveHasMore.value = true;
		}
		console.log(saveForm.value, 'saveForm.value')
		// 调用接口获取存酒记录
		HFiveMemberAppObjProcess({
			functionName: 'GetWineStoreList_H5',
			contentData: saveForm.value,
		}).then((res) => {
			navitemList.value[0] = '存酒数' + `(${res.headData.storeNum})`
			navitemList.value[1] = '将过期' + `(${res.headData.beExpireNum})`
			navitemList.value[2] = '已过期' + `(${res.headData.expireNum})`
			saveList.value = res.bodyData;
			console.log(saveList.value, 'saveList.value')
		});
	};

	// 获取取酒记录
	const getTakeRecords = (flag) => {
		if (flag) {
			takeForm.value.pageIndex = 1;
			takeHasMore.value = true;
		}

		// 调用接口获取取酒记录
		HFiveMemberAppObjProcess({
			functionName: 'GetTaskWineRecord_H5',
			contentData: takeForm.value,
		}).then((res) => {
			const formattedArray = res.map((obj) => ({
				...obj,
				isShowImgs: true, // 是否显示图片
				takeDate: dayjs(obj.takeDate).format('YYYY-MM-DD HH:mm:ss'),
				storeDate: dayjs(obj.storeDate).format('YYYY-MM-DD HH:mm:ss'),
				imgs: obj.attachment.split(','),
			}));
			takeList.value = formattedArray;
			console.log(takeList.value, 'takeList.value');
		});
	};

	// 加载更多记录
	const scrollToLower = () => {
		console.log('加载更多记录')
		console.log(saveHasMore.value,'saveHasMore.value')
		if (activeIndex.value === 0 && !saveHasMore.value) return;
		if (activeIndex.value === 0) {
			saveForm.value.pageIndex++;
			HFiveMemberAppObjProcess({
				functionName: 'GetWineStoreList_H5',
				contentData: saveForm.value,
			}).then((res) => {
				saveHasMore.value = res.bodyData.length > 0;
				saveList.value = [...saveList.value, ...res.bodyData];
			});
		} else {
			if (activeIndex.value === 1 && !takeHasMore.value) return;

			takeForm.value.pageIndex++;
			HFiveMemberAppObjProcess({
				functionName: 'GetTaskWineRecord_H5',
				contentData: takeForm.value,
			}).then((res) => {
				const formattedArray = res.map((obj) => ({
					...obj,
					isShowImgs: true,
					takeDate: dayjs(obj.takeDate).format('YYYY-MM-DD HH:mm:ss'),
					storeDate: dayjs(obj.storeDate).format('YYYY-MM-DD HH:mm:ss'),
					imgs: obj.attachment.split(','),
				}));
				takeHasMore.value = res.length > 0;
				takeList.value = [...takeList.value, ...formattedArray];
			});
		}
	};
</script>

<style lang="scss" scoped>
	.tabs-contianr {
		// background: var(--maincolor);
		padding: 0 140rpx 0 140rpx;
		border-bottom: 1rpx solid var(--maincolorbd);
	}

	.onWine-container {
		padding: 24rpx;
		width: 100%;
		// height: 100%;
		height: 85vh;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding-bottom: 20rpx;

		.onWine-container-tab {
			margin-bottom: 20rpx;
			/*    border-bottom: 1px solid #2E2E2E;*/
		}

		.onWine-container-nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.nav-item {
				width: 222rpx;
				height: 80rpx;
				background: #ffffff;
				border-radius: 16rpx;
				line-height: 80rpx;
				text-align: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #212121;

				&.isSelected {
					background: var(--dt-backcolorPink) !important;
					color: var(--maincolor) !important;
				}
			}
		}

		.onWine-container-main {
			// width: calc(100% - 48rpx);
			// padding: 0 24rpx;
			overflow: hidden;

			.main-item {
				background: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				.item-state {
					display: flex;
					justify-content: flex-end;

					.item-state-left {
						background: #cccccc;
						border-radius: 0rpx 16rpx 0rpx 16rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: var(--maincolor);
						padding: 8rpx 9rpx;
						line-height: 26rpx;
					}
				}

				.item-title {
					padding: 0 0 32rpx 24rpx;
					display: flex;
					align-items: center;

					.item-title-icon {
						width: 32rpx;
						height: 36rpx;
						background-image: url('https://oss.jtmckj.com/wmp/kbq/common/i_icon_wine.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						margin-right: 20rpx;
					}
					.item-title-iconqnjq{
						width: 32rpx;
						height: 36rpx;
						background-image: url('https://oss.jtmckj.com/h5-uniapp/qnig/booktable/i_icon_wine.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						margin-right: 20rpx;
					}

					.item-title-text {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #212121;
						line-height: 32rpx;
					}
				}

				.item-value {
					display: flex;
					align-items: center;
					padding: 0 0 23rpx 76rpx;
					border-bottom: 1px solid #e5e5e5;

					.item-value-type {
						width: 80rpx;
						height: 36rpx;
						background: #f2f2f2;
						border-radius: 4rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						line-height: 36rpx;
						text-align: center;
						margin-right: 11rpx;

						&.notWhole {
							color: #999999;
						}
					}

					.item-value-title {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #666666;
						line-height: 28rpx;
					}

					.item-value-value {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #212121;
						line-height: 28rpx;
					}
				}

				.item-center {
					padding: 24rpx;

					.item-center-li {
						display: flex;
						align-items: center;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						line-height: 28rpx;
						padding-bottom: 40rpx;

						.li-title {
							color: #666666;
						}

						.li-value {
							color: #212121;
						}
					}
				}

				.item-footer {
					border-top: 1px solid #e5e5e5;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 22rpx;

					.footer-tips {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #cc2929;
						line-height: 24rpx;
						padding-left: 3rpx;
					}

					.footer-btn {
						background: var(--dt-backcolorPink);
						border-radius: 8rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: var(--maincolor);
						padding: 15rpx 49rpx;
						line-height: 32rpx;
					}
				}
			}
		}

		.onWine-take-time {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.time-title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
				line-height: 32rpx;
			}

			.time-pick {
				width: 240rpx;
				text-align: center;
				background: #ffffff;
				border-radius: 8rpx;
				padding: 19rpx 0rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #212121;
				line-height: 24rpx;
			}
		}

		.onWine-take-main {
			overflow: hidden;

			.take-main-item {
				background: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				.item-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 37rpx 24rpx 35rpx;
					border-bottom: 1px solid #e5e5e5;

					.header-left {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #212121;
						line-height: 28rpx;
					}

					.header-right {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #212121;
						line-height: 26rpx;
					}
				}

				.item-center {
					padding: 0 24rpx;

					.center-top {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #212121;
						line-height: 32rpx;
						padding: 40rpx 0;
					}

					.center-li {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						line-height: 28rpx;
						padding-bottom: 40rpx;
						display: flex;
						align-items: center;

						.li-title {
							color: #666666;
						}

						.li-value {
							color: #212121;
						}
					}
				}

				.item-imgs {
					padding: 0 24rpx 4rpx;

					.imgs-item {
						width: 206rpx;
						height: 206rpx;
						padding-bottom: 12rpx;
					}
				}

				.item-footer {
					display: flex;
					justify-content: center;

					.item-footer-icon {
						width: 40rpx;
						height: 40rpx;
						padding-bottom: 40rpx;

						&.turn {
							display: none;
						}
					}
				}
			}
		}
	}

	.popup-take {
		border-radius: 20rpx;
		padding: 0 48rpx 30rpx 48rpx;
		margin-bottom: 20rpx;
		background: #ffffff;
  
		.title {
			text-align: center;
			padding-top: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #212121;
			line-height: 36rpx;
		}

		.popup-take-main {
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #212121;
			line-height: 32rpx;
			padding: 65rpx 0 74rpx;

			.main-text {
				color: #212121;
			}
		}

		.popup-take-num {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 50rpx;
			margin-bottom: 60rpx;
			position: relative;

			.num-title {
				margin-right: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
				line-height: 32rpx;
			}

			.num-text {
				z-index: 999;
				right: 24rpx;
				position: absolute;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
				line-height: 32rpx;
			}

			.van-cell {
				width: 360rpx;
				height: 80rpx;
				background: #f2f2f2;
				border-radius: 8px;
				padding: 0;
			}

			.van-field__control {
				padding: 0 60rpx 0 25rpx;
				height: 80rpx;
				color: #666666;
			}

			.van-field__placeholder {
				color: #666666;
			}
		}

		.popup-take-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.footer-left {
				border-radius: 40rpx;
				border: 2px solid var(--maincolorbd);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: var(--third--self--color);
				line-height: 36rpx;
				padding: 23rpx 85rpx;
			}

			.footer-right {
				background: var(--dt-backcolorPink);
				border-radius: 40rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: var(--maincolor);
				line-height: 36rpx;
				padding: 24rpx 85rpx;
			}
		}
	}

	.popup-wine {
		width: 640rpx;

		.title {
			text-align: center;
			padding-top: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #212121;
			line-height: 36rpx;
		}

		&-control {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 48rpx 40rpx;
		}

		&-btn {
			border-radius: 16rpx;
			background: var(--dt-backcolorPink);
			/* border: 1px solid #212121;*/
			padding: 34rpx 0;
			width: 230rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: var(--maincolor);
			line-height: 32rpx;
			text-align: center;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 42rpx;
				right: 45rpx;
				width: 12rpx;
				height: 22rpx;
				background-image: url('https://oss.jtmckj.com/wmp/images/common/i_triangle_right.png');
				background-size: 100% auto;
				background-repeat: no-repeat;
			}
		}

		&-h2 {
			padding: 0 0 40rpx 48rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 32rpx;
		}

		.van-radio__label {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 32rpx;
		}

		.van-radio-group--horizontal {
			/* padding: 0 48rpx 40rpx;*/
			justify-content: space-between;
			padding: 0 100rpx 25rpx 48rpx;
		}

		.van-radio--horizontal {
			margin: 0;
		}

		.feedback-value {
			background: #262626;
			border-radius: 16rpx;
			padding: 25rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 48rpx;

			.value-text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
				line-height: 32rpx;
			}

			.value-right {
				display: flex;
				align-items: center;

				.right-value {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #ffffff;
					line-height: 32rpx;
					padding-right: 16rpx;
				}

				.right-icon {
					width: 12rpx;
					height: 22rpx;
					background-image: url('https://oss.jtmckj.com/wmp/images/center/i_icon_tra-right.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}
			}
		}
	}

	.popup-container {
		padding-bottom: 40rpx;
		.popup-container-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			/* padding: 33rpx 60rpx 32rpx;*/
			border-bottom: 1px solid #e5e5e5;

			.header-left {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: var(--third--self--color);
				line-height: 32rpx;
				padding: 33rpx 60rpx 32rpx;
			}

			.header-center {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #fefefe;
				line-height: 36rpx;
			}

			.header-right {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #212121;
				line-height: 32rpx;
				padding: 33rpx 60rpx 32rpx;
			}
		}

		.popup-container-main {
			padding: 20rpx 24rpx 0;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;

			.main-item {
				background: #383838;
				border-radius: 8rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 80rpx;
				text-align: center;
			}

			.van-col {
				margin-bottom: 20rpx;
			}
		}

		.popup-container-footer {
			margin: 0 24rpx 160rpx;
			background: #f2f2f2;
			border-radius: 16rpx;
			padding: 24rpx 0rpx 4rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;

			.footer-item {
				/* width: 118rpx; */
				padding: 0 26rpx;
				height: 60rpx;
				background: #ffffff;
				border-radius: 8rpx;
				text-align: center;
				margin-bottom: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #212121;
				line-height: 60rpx;
				margin-right: 16rpx;
			}
		}
	}

	.cj-continar {
		display: flex;
		align-items: center;
		padding-left: 80rpx;

		/* padding-top: 10rpx;*/
		.barCode-title {
			color: #666666;
			font-size: 28rpx;
		}

		.barCode-num {
			font-size: 34rpx;
			color: #212121;
			font-weight: 700;
		}
	}

	::v-deep .u-picker .u-toolbar__wrapper__cancel {
		color: var(--maincolorf2) !important;
	}

	::v-deep .u-picker .u-toolbar__wrapper__confirm {
		color: var(--maincolorf1) !important;
	}

	::v-deep .u-picker .u-toolbar__title {
		font-weight: 700 !important;
	}

	::v-deep .u-popup__content {
		border-radius: 16rpx !important;
	}

	::v-deep .u-datetime-picker {
		display: none !important;
	}

	::v-deep .popup-content {
		padding: 0 !important;
	}

	.popup-container .popup-container-main .main-item {
		background: none !important;
	}
	
	::v-deep .u-safe-bottom {
		display: none !important; 
	}
</style>